<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>学生信息</title>
    <link rel="stylesheet" href="/css/lay.css">
    <link rel="stylesheet" href="/css/styles.css">
    <script src="layui.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body class="layui-layout-body" style="background-color: #F2F2F2">

<jsp:include page="/teacher/tHeader.jsp"></jsp:include>
<jsp:include page="/teacher/teacherNav.jsp"></jsp:include>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <span class="layui-breadcrumb">
                    <a href="">教师端</a>
                    <a href="">学生通讯录</a>
                    <a><cite>学生信息</cite></a>
                </span>
                <form id="selectStudent" method="post">
                    <table class="layui-table" lay-filter="test">
                        <thead>
                        <tr>
                            <th><input id="firstCb" type="checkbox" class="my-checkbox" name="" title="" lay-skin="primary"></th>
                            <th>学号</th>
                            <th>学院</th>
                            <th>系别</th>
                            <th>班级</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>城市</th>
                            <th>手机号</th>
                            <th>邮箱</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="tb">
                        </tbody>
                    </table>
                </form>
                <!--这里显示分页信息-->
                <tfoot>
                <tr>
                    <td colspan="2" style="text-align: center">
                        当前页码:<span id="currentPage"></span><br/>
                        总页数:<span id="totalPage"></span><br/>
                        总条数:<span id="totalItems"></span>
                    </td>
                    <td colspan="2" style="text-align: center" >
                        <nav aria-label="Page navigation">
                            <ul class="pagination" id="pageBar">

                            </ul>
                        </nav>
                    </td>
                </tr>
                </tfoot>
            </div>
        </div>
    </div>


<script type="text/javascript">
    $("#nav li:nth-child(2) dl dd:nth-child(1)").addClass("layui-this");
    $("#nav li:nth-child(2)").addClass("layui-nav-itemed");
</script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
        element.init();
    });
</script>
<script>
    //展示学生信息
    function loadAllStudents(pn, size) {
        $.ajax({
            url: '../student/students/' + pn + '/' + size,
            type: 'get',
            dataType: 'json',
            success: function (res) {
                if (res.code == 200) {
                    //清除上一次的分页条信息，使用新的
                    $("#pageBar").empty();
                    $("#tb").empty();
                    let data_temp = res.data.list
                    for (let i = 0; i < data_temp.length; i++) {
                        $("<tr><td><input type='checkbox'></td><td>"+data_temp[i].sid+"</td><td>"+data_temp[i].scollege+"</td><td>"+data_temp[i].sdepartment+"</td><td>"+data_temp[i].sclass+"</td><td>"+data_temp[i].sname+"</td><td>"+data_temp[i].ssex+"</td><td>"+data_temp[i].sage+"</td><td>"+data_temp[i].saddress+"</td><td>"+data_temp[i].sphone+"</td><td>"+data_temp[i].semail+"</td><td>"+data_temp[i].status+"</td><td><a href='updateStudent.jsp?sid="+data_temp[i].sid+"&scollege="+data_temp[i].scollege+"&sdepartment="+data_temp[i].sdepartment+"&sclass="+data_temp[i].sclass+"&sname="+data_temp[i].sname+"&sage="+data_temp[i].sage+"&sphone="+data_temp[i].sphone+"&semail="+data_temp[i].semail+"&saddress="+data_temp[i].saddress+"' class='layui-btn'>编辑</a><button class='layui-btn layui-btn-danger'  onclick='unActive("+data_temp[i].sid+","+res.data.pageNum +")'>禁用</button></td></tr>").appendTo($("#tb"));
                    }
                    //拼接分页条
                    //显示当前页
                    document.getElementById("currentPage").innerText=res.data.pageNum
                    document.getElementById("totalPage").innerText=res.data.pages
                    document.getElementById("totalItems").innerText=res.data.total
                    //拿到分页导航数据
                    let pageNav =res.data.navigatepageNums
                    // 判断上一页按钮是否可以点击
                    if (res.data.hasPreviousPage) { // TRUE
                        $("<li><a href='#' onclick='loadAllStudents("+(res.data.pageNum-1)+",3)' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>").appendTo($("#pageBar"));
                    } else {
                        $("<li class='disabled'><a href='#' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>").appendTo($("#pageBar"));
                    }
                    for (let i = 0; i < pageNav.length; i++) {
                        $("<li><a href=\"#\" onclick='loadAllStudents("+pageNav[i]+",3)'>"+pageNav[i]+"</a></li>").appendTo("#pageBar");
                    }
                    // 判断下一页按钮是否可以点击
                    if (res.data.hasNextPage) {
                        $("<li><a href='#' onclick='loadAllStudents("+(res.data.pageNum+1)+",3)' aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>").appendTo($("#pageBar"));
                    } else {
                        $("<li class='disabled'><a href='#' aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>").appendTo($("#pageBar"));
                    }
                }
            }
        });
    }
    window.onload = function () {
        // 网页加载完毕马上执行查询所以学生信息
        loadAllStudents(1, 3);}
</script>
</body>
</html>
